<template>
  <div>
    <el-dialog title="编辑用户" :visible.sync="dialogVisible" width="30%">

      <el-form ref="forms" :model="form" class="demo-form-inline" size="small" label-width="80px" :rules="rules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="用户名" />
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickName">
          <el-input v-model="form.nickName" placeholder="用户昵称" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" placeholder="密码" />
        </el-form-item>
        <el-form-item label="用户头像">
          <el-upload
            class="avatar-uploader"
            :headers="headers"
            :action="action"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="form.salt" :src="form.salt" class="avatar">
            <i v-else class="el-icon-s-custom avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="选择角色">
          <el-select v-model="form.roleIds" placeholder="请选择" clearable>
            <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { findAllRoles } from '@/api/auth/role'
import { user, saveUserRoles, updateUserRoles } from '@/api/auth/user'
import mixin from '@/mixins/index'
export default {
  mixins: [mixin],
  data() {
    return {
      id: '',
      dialogVisible: false,
      roleList: [],
      form: {
        username: '',
        nickName: '',
        password: '',
        salt: '',
        roleIds: []
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: '请输入用户昵称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
  },
  created() {
    this.getRoles()
  },
  methods: {
    getRoles() {
      findAllRoles().then(res => {
        if (res.success) {
          this.roleList = res.data.items
        }
      })
    },
    getDetail() {
      user(this.id).then(res => {
        // console.log(res)
        this.form = res.data.user
      })
    },
    open(id) {
      this.dialogVisible = true
      if (id) {
        this.id = id
        this.getDetail()
      }
    },
    handleAvatarSuccess(res) {
      this.form.salt = res.data.fileUrl
    },
    save() {
      this.$refs.forms.validate((valid) => {
        if (valid) {
          if (this.id) {
            updateUserRoles(this.form).then(res => {
              if (res.success) {
                this.$message.success('编辑成功')
                this.dialogVisible = false
                this.getRoles()
              } else {
                this.$message.error('编辑失败')
              }
            })
          } else {
            saveUserRoles({
              ...this.form,
              roleIds: [this.form.roleIds]
            }).then(res => {
              if (res.success) {
                this.$message.success('新增成功')
                this.dialogVisible = false
                this.getRoles()
              } else {
                this.$message.error('新增失败')
              }
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .avatar{
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
</style>
